<style lang="less">
@import '../../../styles/common.less';
</style>
<template>
    <Card style="height:900px">
        <Row>
            <Col span="24">
            <Card>
                <Card style="height: 88px;">
                    <div style="width:40%;float: left;margin-top: 8px;text-align: end;">
                        <a href="javacript:void(0);" @click="refuseList()">已拒绝{{statistics.auditRefuseTotal}}份</a>
                    </div>
                    <div style="width:40%;float: left;margin-top: 8px;text-align: center;">
                        <a href="javacript:void(0);" @click="adoptList()">已通过{{statistics.auditSuccessTotal}}份</a>
                    </div>
                    <div style="width:20%;float: left;margin-top: 8px;text-align: end;">
                        <Button type="primary" @click="back" style="float: right">返回</Button>
                    </div>
                </Card>
                <Row type="flex" justify="center" align="middle" class="list-query">
                    <Table border :columns="columns" :data="columnData" style="width: 100%;"></Table>
                </Row>
                <div class="apply-data-bottom-page-div">
                    <Page :total="paymentCondition.total" :current="paymentCondition.pageNum" :page-size="paymentCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
                </div>
            </Card>
            </Col>
        </Row>
        <Modal v-model="modal1" title="代还款申请" @on-ok="ok" @on-cancel="cancel">
            <div class="apply-data-popup-style">
                <div class="apply-data-font-style">实还金额：</div>
                <Input v-model="applyInfo.paymentAmountAct" style="width:180px" />
            </div>

            <div class="apply-data-popup-style">
                <div class="apply-data-font-style"> 还款方式:</div>
                <div>
                    <Select v-model="applyInfo.paymentWay" class="v-select-wrapper" style="width:180px">
                        <Option v-for="item in paytmentWayList" :value="item.value" :key="item.value">{{ item.label}}</Option>
                    </Select>
                </div>
            </div>

            <div class="apply-data-popup-style">
                <div class="apply-data-font-style">备注：</div>
                <Input v-model="applyInfo.remarks" style="width:180px" />
            </div>

            <div class="apply-data-popup-style">
                <div class="apply-data-font-style">转账人姓名：</div>
                <Input v-model="applyInfo.transferUserName" style="width:180px" />
            </div>

        </Modal>
    </Card>
</template>

<script>
export default {
  name: 'mutative-router',
  data () {
    return {
      modal1: false,
      paymentCondition: {
        custName: '',
        custIdNumber: '',
        loanId: '',
        repaymentBeginDate: '',
        repaymentEndDate: '',
        repaymentStatus: '',
        audistStatus: '',
        payType: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      applyInfo: {
        paymentAmountAct: '', // 实还金额
        paymentWay: '', // 还款方式
        remarks: '', // 备注
        transferUserName: '', // 转账人姓名
        loanId: '' // 进件单号
      },
      statistics: {
        auditRefuseTotal: 0,
        auditSuccessTotal: 0
      },
      paytmentWayList: [
        {
          value: '1',
          label: '对公转账'
        },
        {
          value: '2',
          label: '支付宝转账'
        }
      ],
      columns: [
        {
          type: 'index',
          title: '序号',
          width: 60
        },
        {
          title: '客户姓名',
          key: 'custName',
          align: 'center'
        },
        {
          title: '身份证',
          key: 'custCardNo',
          align: 'center'
        },
        {
          title: '当前还款期数',
          key: 'tenor',
          align: 'center'
        },
        {
          title: '资金方',
          key: 'fundName',
          align: 'center'
        },
        {
          title: '总欠款金额',
          key: 'amount',
          align: 'center'
        },
        {
          title: '实还金额',
          key: 'amountAct',
          align: 'center'
        },
        {
          title: '还款方式',
          key: 'repaymentWays',
          align: 'center',
          render: (h, params) => {
            if (params.row.repaymentWays === '1') { // 对公转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '对公转账')
            }
            if (params.row.repaymentWays === '2') { // 支付宝转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '对公转账')
            }
          }
        },
        {
          title: '状态',
          key: 'contractStatus',
          align: 'center',
          // 0正常 1逾期 2结清 3提前结清 10核销
          render: (h, params) => {
            if (params.row.contractStatus === '0') { // 对公转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '正常')
            }
            if (params.row.contractStatus === '1') { // 支付宝转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '逾期')
            }
            if (params.row.contractStatus === '3') { // 支付宝转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '提前结清')
            }
            if (params.row.contractStatus === '10') { // 支付宝转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '核销')
            }
          }

        },
        {
          title: '备注',
          key: 'remarks',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            if (params.row.auditStatus === '' || params.row.auditStatus === null || params.row.auditStatus === '2') {
              return h('span', {
                style: {
                  'color': '#20a0ff',
                  'cursor': 'pointer'
                },
                on: {
                  click: () => {
                    this.modal1 = true
                    this.applyInfo.loanId = params.row.loanId
                  }
                }
              }, '代还款')
            }
          }
        }
      ],
      columnData: []
    }
  },
  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.paymentCondition = this.$route.params.paymentCondition
    this.initData()
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },
  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.paymentCondition.pageNum = pageNum
      vm.initData()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.paymentCondition.pageSize = pageLength
      vm.initData()
    },
    initData () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/replacePayment/service/paymentApplyList', this.paymentCondition).then(re => {
        var data = re.data
        vm.columnData = data.data.list
        vm.paymentCondition.total = data.data.total
        vm.statistics = data.data.statistics
      }).catch(er => {

      })
    },
    ok () {
      var vm = this
      if (vm.applyInfo.paymentAmountAct === '') {
        this.$Message.warning('实还金额不能为空')
        return
      }
      var reg = /^\d+(?=\.{0,1}\d+$|$)/
      if (!reg.test(vm.applyInfo.paymentAmountAct)) {
        this.$Message.warning('实还金额必须为正数')
        return
      }
      if (vm.applyInfo.transferUserName === '') {
        this.$Message.warning('转账人姓名不能为空')
        return
      }
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/replacePayment/service/paymentApply', vm.applyInfo).then(re => {
        var data = re.data
        var message = data.message
        this.$Message.warning(message)
        vm.initData()
      }).catch(er => {

      })
    },
    cancel () {
      this.$Message.info('Clicked cancel')
    },
    adoptList () { // 通过
      var vm = this
      vm.paymentCondition.audistStatus = '1'
      vm.paymentCondition.payType = '1'
      var paymentCondition = vm.paymentCondition
      this.$router.push({ name: 'payment-audit-result', params: { paymentCondition } })// 类似post传参
    },
    refuseList () {
      var vm = this
      vm.paymentCondition.audistStatus = '2'
      vm.paymentCondition.payType = '1'
      var paymentCondition = vm.paymentCondition
      this.$router.push({ name: 'payment-audit-result', params: { paymentCondition } })// 类似post传参
    },
    back () {
      this.$router.push({ name: 'replace-payment-apply', params: {} })// 类似post传参
    }
  }
}
</script>
<style>
.apply-data-font-style {
  float: left;
  margin-left: -88px;
  text-align: center;
  width: 175px;
}
.apply-data-popup-style {
  margin: 18px;
  width: 300px;
  margin-left: 27%;
  margin-top: 31px;
}
.apply-data-bottom-page-div {
  margin-top: 120px;
  text-align: center;
}
</style>
